<template>
    <div class="app">
        <UserHeader />
        <div class="container">
          <div class="sidebar">
            <UserSidebar />
            <UserSidebar2 />
          </div>
            <router-view class="main-content"></router-view>
            <UserHotList v-if="!isPostDetail" />
        </div>
        <user-footer></user-footer>
    </div>
</template>

<script>
import UserHeader from '../components/UserHeader.vue';
import UserSidebar from '../components/UserSidebar.vue';
import UserHotList from '../components/UserHotList.vue';
import UserSidebar2 from '@/components/UserSidebar2.vue';
import UserFooter from '@/components/UserFooter.vue'

export default {
    components: {
        UserHeader,
        UserSidebar,
        UserSidebar2,
        UserHotList,
        UserFooter
    },
    computed: {
        isPostDetail() {
            return this.$route.path.includes('/detail/');
        }
    }
};
</script>

<style scoped>
.app {
  display: flex;
  flex-direction: column;
  margin: 0px;
}

.user-header {
  top: 0;
  left: 0;
  right: 0;
  background-color: white; /* 或者任何你想要的颜色 */
}

.container {
  display: flex;
  flex-grow: 1;
  background-color:#f2f5f7; /* 轻微的灰色 */
}

.sidebar-container {
  display: flex;
  flex-direction: column;
  flex-basis: 200px;
  flex-shrink: 0;
}

.sidebar {
  flex-basis: 200px;
  flex-shrink: 0;
  margin-left: 100px;
  
}

.main-content {
  flex-grow: 1;
  padding: 20px;
  overflow-y: auto;
  margin-left: 20px;
}

.hot-list {
  flex-basis: 200px;
  flex-shrink: 0;
  margin-left: 20px;
  margin-right: 100px;
}

.contact-info {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-top: 20px;
}

.contact-info h3 {
  margin-bottom: 10px;
}

.contact-info p {
  margin: 5px 0;
  
}
</style>